<template>
  <div>
    <div class="wwwheader">
      <div class="wwwheadertop">
        <div>
          <a href="">
            <img src="../assets/img/抽奖.png" alt="" />
            <p>抽奖</p>
          </a>
        </div>
        <div classs="wwwall">
          <img id="wwwallseek" src="../assets/img/搜索.png" alt="" />
          <input class="wyy" type="text" />
          <img id="wwwallvoice" src="../assets/img/213麦克风.png" alt="" />
        </div>
        <div>
          <img src="../assets/img/版本.png" alt="" />
          <p>版本</p>
        </div>
        <div>
          <img src="../assets/img/客服.png" alt="" />
          <p>客服</p>
        </div>
        <div>
          <img src="../assets/img/消息.png" alt="" />
          <router-link to="Message"><p>消息</p></router-link>
        </div>
      </div>
    </div>
    <div class="wwwlist">
      <div class="wwwlist1">
        <img src="../assets/img/1我的.png" alt="" />
        <router-link to="DebitCard"><p>我的账户</p></router-link>
      </div>
      <div class="wwwlist1">
        <router-link to="Transfer">
          <img src="../assets/img/转账 copy.png" alt="" />
          <p>转账</p></router-link
        >
      </div>
      <div class="wwwlist1" @click="dij">
        <img class="meng1" src="../assets/img/交易明细查询.png" alt="" />
        <p>明细查询</p>
      </div>
      <div class="wwwlist1">
        <router-link to="RichScan">
          <img src="../assets/img/扫一扫.png" alt="" />
          <p>扫一扫</p></router-link
        >
      </div>
    </div>
    <div class="wwwsection">
      <div>
        <a href="">
          <img
            src="../assets/img/信用卡.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>信用卡</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/存款1.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>存款</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/127收支明细、财富、钱包-线性.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>收支</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/热门活动.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>热门活动</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/养老服务_linear.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>个人养老</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/贷款.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>贷款</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/理财产品.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>理财产品</p>
        </a>
      </div>
      <div>
        <router-link to="fund">
          <img
            src="../assets/img/我的基金.png"
            alt=""
            style="width: 35px; height: 35px; margin-top: 5px"
          />
          <p>基金</p>
        </router-link>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/城市.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <p>城市</p>
        </a>
      </div>
      <div>
        <a href="">
          <img
            src="../assets/img/全部1.png"
            alt=""
            style="width: 40px; height: 40px"
          />
          <router-link to="All"> <p>全部</p></router-link>
        </a>
      </div>
    </div>
    <div class="wwwtext">
      <b>头条</b>
      <span>一季度农业农村</span>
    </div>
    <div class="wwwmoney">
      <div class="wwwmoneyleft">
        <p>美元(USD)</p>
        <b>691.78</b>
      </div>
      <p class="wwwdivision">|</p>
      <div class="wwwmoneyright">
        <p>黄金(AU)</p>
        <b>448.47</b>
      </div>
    </div>
    <div class="wwwlubbo"></div>
    <div class="wwwbottom">
      <ul>
        <li>
          <img src="../assets/img/首页.png" alt="" />
          <p>首页</p>
        </li>
        <router-link to="earnings">
        <li>
          
            <img src="../assets/img/121收支明细、财富、红包、余额.png" alt="" />
            <p>财富</p>
          
        </li>
      </router-link>
        <li>
          <img src="../assets/img/生活.png" alt="" />
          <p>生活</p>
        </li>
        <li>
          <img src="../assets/img/党建_乡村振兴.png" alt="" />
          <p>乡村盛兴</p>
        </li>
        <router-link to="My">
          <li>
            <img src="../assets/img/3.1我的.png" alt="" />
            <p>我的</p>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    dij() {
      this.$router.push("/detail");
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.wwwheader {
  width: 100%;
  height: 170px;
  background-color: rgba(255, 166, 0, 0.674);
  background-size: cover;
}

.wwwheadertop {
  display: flex;
  justify-content: space-evenly;
}
.wwwheadertop div {
  margin-top: 33px;
}
.wwwheadertop img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
.wwwall {
  width: 60px;
  height: 30px;
  background-color: aqua;
}
#wwwallseek {
  height: 20px;
  width: 20px;
  padding-left: 5px;
  vertical-align: middle;
}

#wwwallvoice {
  height: 20px;
  width: 20px;
  padding-right: 5px;
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: black;
}

.wyy {
  width: 150px;
  height: 30px;
  border-radius: 40px;
  margin-top: 5px;
}

.wwwlist {
  width: 90%;
  height: 150px;
  background: rgb(255, 255, 255);
  margin: -60px auto;
  box-shadow: 0 3px 8px rgb(117, 114, 114);
  border-radius: 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.wwwlist1 img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  /* margin-left: 5px; */
  padding-left: 7px;
}
.wwwlist1 p {
  margin-top: 10px;
  margin-right: -4px;
}
.wwwlist1 a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wwwsection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 75px;
  border-bottom: 1px solid gray;
}
.wwwsection div {
  width: 20%;
  height: 70px;
  margin-top: 10px;
  /* display: flex; */
}
.wwwsection a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wwwelement.style {
  width: 40px;
  height: 40px;
}
.wwwsection p {
  margin: 0 auto;
}
.wwwtext {
  margin: 10px 0 0 20px;
}
.wwwmoney {
  margin: 0 auto;
  width: 90%;
  height: 50px;
  border: 1px solid rgb(139, 139, 139);
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wwwdivision {
  color: rgb(192, 192, 192);
}
.wwwmoneyleft {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.wwwmoneyleft p {
  color: rgb(243, 188, 6);
  margin-right: 6px;
}
.wwwmoney-right {
  display: flex;
  flex-direction: column;
}
.wwwmoneyright p {
  color: rgb(243, 188, 6);
  margin-right: 20px;
}
.wwwbottom {
  width: 100%;
  height: 50px;
}

.wwwbottom ul {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-around;
}

.wwwbottom ul li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wwwbottom img {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.wwwbottom p {
  margin-top: 10px;
}
</style>
